<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
  <div class="cart-box">
    <s-header :name="'购物车'"></s-header>
    <div class="cart-body">
      <van-checkbox-group @change="groupChange" v-model="result" ref="checkboxGroup">
        <van-swipe-cell :right-width="50" v-for="(item, index) in list" :key="index">
          <div class="good-item">
            <van-checkbox :name="item.id"/>
            <div class="good-img" @click="goto_goods_detail(item.goods_info.id)"><img :src="prefix(item.goods_info.img)" alt="" ></div>
            <div class="good-desc">
              <div class="good-title">
                <span>{{ item.goods_info.name }}</span>
                <span>x{{ item.buy_num }}</span>
              </div>
              <div>{{ item.style }}</div>
              <div class="good-btn">
                <div class="price">¥{{ item.goods_info.price }}</div>
                <van-stepper v-model="item.buy_num" theme="round" button-size="22" async-change @change="onChange(item)"
                             intege/>
              </div>
            </div>
          </div>
          <van-button slot="right" square icon="delete" type="danger" class="delete-button"
                      @click="deleteGood(item.id)"/>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>

    <van-submit-bar v-if="list.length > 0" class="submit-all" :price="total * 100" button-text="结算" @submit="onSubmit">
      <van-checkbox @click="allCheck" v-model="checkAll" :nonce="true">全选</van-checkbox>
    </van-submit-bar>
    <div class="empty" v-if="!list.length">
      <van-icon name="smile-o"/>
      <div class="title">购物车空空空如也</div>
      <van-button color="#1baeae" type="primary" @click="goTo" block>前往首页</van-button>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import {Toast} from 'vant'
import navBar from '@/components/NavBar'
import sHeader from '@/components/SimpleHeader'

export default {
  data() {
    return {
      checked: false,
      list: [],
      all: false,
      result: [],
      checkAll: false,
      currentPage: '',
      page_num: ''
    }
  },
  components: {
    navBar,
    sHeader
  },
  created() {
    const token = this.$cookies.get('token')
    if (token) {
      const id = this.$cookies.get('id')
      this.$axios.get(this.$settings.BASE_URL + 'shopcar/car/?user_id=' + id,
        {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
        this.list = res.result
        this.page_num = res.result.length
      })
    } else {
      Toast.fail('您还没有登入请先登入!')
      this.$router.push({path: '/login'})
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    total: function () {
      let sum = 0
      let _list = this.list.filter(item => this.result.includes(item.id))
      _list.forEach(item => {
        sum += item.buy_num * item.goods_info.price
      })
      return sum
    }
  },
  methods: {
    async init() {
      const id = this.$cookies.get('id')
      this.$axios.get(this.$settings.BASE_URL + 'shopcar/car/?user_id=' + id,
        {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
        this.list = res.result
        Toast.clear()
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    goto_goods_detail(id) {
      this.$router.push({path: `/product/${id}/`})
    },
    goTo() {
      this.$router.push({path: 'home'})
    },
    async onChange(value) {
      const id = this.$cookies.get('id')
      this.$axios.put(this.$settings.BASE_URL + 'shopcar/update/' + value.id + '/?user_id=' + id,
        {buy_num: value.buy_num,shop_id:value.goods_info.id}, {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
        if (res.code != 100) {
          setTimeout(() => {
            Toast.fail(res.msg)
          }, 50)

          this.init()
        }
      })
    },
    async onSubmit() {
      if (this.result < 1) {
        Toast.fail('请选择商品进行结算')
        return
      }
      let params = this.list.filter(item => this.result.includes(item.id))
      this.$store.state.params = params
      this.$router.push({path: '/create-order'})
    },
    async deleteGood(id) {
      this.$axios.delete(this.$settings.BASE_URL + 'shopcar/car/' + id + '/',
        {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
        if (res.code != 100) {
          this.init()
          this.$store.dispatch('minus', 1)
        }
      })
    },
    groupChange(result) {
      if (result.length == this.list.length) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
      this.result = result
    }
    ,
    allCheck() {
      if (this.checkAll) {
        this.result = this.list.map(item => item.id)
      } else {
        this.result = []
      }
    }
  }
}
</script>

<style lang="less">
@import '../common/style/mixin';

.cart-box {
  .cart-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;

    .cart-name {
      font-size: 14px;
    }
  }

  .cart-body {
    margin: 60px 0 100px 0;
    padding-left: 10px;

    .good-item {
      display: flex;

      .good-img {
        img {
          .wh(100px, 100px)
        }
      }

      .good-desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding: 20px;

        .good-title {
          display: flex;
          justify-content: space-between;
        }

        .good-btn {
          display: flex;
          justify-content: space-between;

          .price {
            font-size: 16px;
            color: red;
            line-height: 28px;
          }

          .van-icon-delete {
            font-size: 20px;
            margin-top: 4px;
          }
        }
      }
    }

    .delete-button {
      width: 50px;
      height: 100%;
    }
  }

  .empty {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    margin-top: 200px;

    .van-icon-smile-o {
      font-size: 50px;
    }

    .title {
      font-size: 16px;
      margin-bottom: 20px;
    }
  }

  .submit-all {
    margin-bottom: 50px;

    .van-checkbox {
      margin-left: 10px
    }

    .van-submit-bar__text {
      margin-right: 10px
    }

    .van-submit-bar__button {
      background: @primary;
    }
  }

  .van-checkbox__icon--checked .van-icon {
    background-color: @primary;
    border-color: @primary;
  }
}
</style>
